@import "../commonFunc";

.my_basic_info_module {
    height: 100%;
    overflow: auto;
    @include scrollBar(px2rem(4));
    padding-left: px2rem(15);

    .section_item {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
        margin-bottom: px2rem(12);
        padding: 0 calc(100% - 780px) 0 px2rem(45);
        @include bgColor(rgba(255, 255, 255, .3));

        h3 {
            height: px2rem(52);
            border-bottom: 1px solid rgba(137, 99, 66, .4);
            @include displayFlex;
            justify-content: flex-start;
            @include color(#896342);
            @include fontSize(px2rem(16));
            margin-bottom: px2rem(23);
        }

        .editIcon {
            @include fontSize(px2rem(18));
            margin-left: px2rem(25);
            @include color($defaultColor);
            cursor: pointer;

            &:hover, &.active {
                @include color($yellowColor)
            }
        }

        .ant-form {
            .ant-form-item {
                label, p {
                    @include fontSize(px2rem(14));
                    @include color(#896342)
                }

                label {
                    text-align-last: justify;
                    text-align: justify;
                    text-justify: distribute-all-lines;
                    display: inline-block;
                    line-height: px2rem(32);
                    width: px2rem(79);
                }
            }
        }

        &:last-of-type {
            margin-bottom: 0;
        }

        &.user_info {
            //height: px2rem(360);

            .ant-form {
                .ant-form-item {
                    margin-bottom: 13px;
                }
            }
        }

        &.changePassword {
            min-height: calc(100% - 313px - 12px);

            .ant-form {
                .ant-form-item {
                    margin-bottom: 13px;

                    .ant-form-item-explain-error {
                        div {
                            @include position;
                            width: px2rem(450);
                        }
                    }

                    &.btn_form_item {
                        margin-bottom: 0;
                    }

                    .ant-input-affix-wrapper, input {
                        @include bgColor(transparent)
                    }

                    .custom_btn_group {
                        @include displayFlex;

                        span {
                            margin-left: px2rem(22);
                            @include widthHeight(px2rem(76), px2rem(41));
                            @include displayFlex;
                            background-image: url('../../images/person_center_btn_bg.svg');
                            background-repeat: no-repeat;
                            background-position: center;
                            cursor: pointer;
                            @include color(#876040);
                            @include fontSize;

                            &:first-of-type {
                                margin-left: 0;
                            }

                            &:hover {
                                background-image: url('../../images/person_center_btn_bg_active.svg');
                                @include color(white);
                                animation: btnAnimate .3s linear forwards;
                            }
                        }
                    }
                }
            }

            .tips {
                @include color(rgba(137, 99, 66, .8));
                @include fontSize(px2rem(14));
                line-height: px2rem(30);
                margin-top: px2rem(50);

                &:last-of-type {
                    margin-top: 0;
                    text-indent: px2rem(32);
                }
            }
        }
    }
}

@keyframes btnAnimate {
    0% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}